<template>
  <div class="container">
    <el-dialog
      title="费用单详情"
      :visible.sync="dialog.dialogVisible"
      width="90%"
      center
      @open="getData"
      :lock-scroll="true"
      @close="closeDialog"
    >
      <div class="top">
        <el-form label-width="100px" label-position="left">
          <el-form-item label="供应商：">
            <div class="inp">{{ inside }}</div>
          </el-form-item>
          <el-form-item label="配送中心：">
            <div class="inp">{{ distribution }}</div>
          </el-form-item>
          <el-form-item label="采购员：">
            <div class="inp">{{ purchase }}</div>
          </el-form-item>
          <el-form-item label="单据类型：">
            <div class="inp">{{ formData.bill_type }}</div>
          </el-form-item>
          <el-form-item label="收取反向：">
            <div class="inp">{{ formData.mode }}</div>
          </el-form-item>
          <el-form-item label="单据备注：">
            <div class="inp">{{ formData.notes }}</div>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column
          prop="name"
          label="费用名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="type_code"
          label="编码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="amount"
          label="金额"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="notes"
          label="备注"
          align="center"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { readExpense } from "@/api/expenseDoc/expenseDocList";

export default {
  props: {
    dialog: Object
  },
  data() {
    return {
      formData: {
        bill_type: "",
        mode: "",
        notes: ""
      },
      inside: "",
      purchase: "",
      distribution: "",
      tableData: []
    };
  },
  created() {},
  methods: {
    getData() {
      let data = {
        id: this.dialog.id
      };
      readExpense(data).then(res => {
        if (res.code == 0) {
          res.data.detail.forEach(item => {
            this.tableData.push({
              type_id: item.type_id,
              type_code: item.type_code,
              amount: item.amount,
              notes: item.notes,
              name: item.type_name
            });
          });
          this.formData = {
            bill_type: res.data.expense.bill_type == 1 ? "生鲜" : "商超",
            mode: res.data.expense.mode == 1 ? "应收" : "应付",
            notes: res.data.expense.notes
          };
          this.inside = res.data.expense.supplier_name;
          this.purchase = res.data.expense.buyer_name;
          this.distribution = res.data.expense.rdc_name;
        }
      });
    },

    //取消
    closeDialog() {
      this.expenseTypeList = [];
      this.formData = {
        bill_type: "",
        mode: "",
        notes: ""
      };

      this.inside = "";
      this.purchase = "";
      this.distribution = "";
      this.tableData = [];
      this.dialog.dialogVisible = false;
    }
  }
};
</script>
<style scoped>
.top {
  position: relative;
  /* height: 40px; */
}
.main {
  display: flex;
  justify-content: center;
}
.add {
  margin: 10px 0;
  margin-left: auto;
}
.inp {
  border: 1px solid #eee;
  width: 500px;
  padding-left: 10px;
  border-radius: 5px;
  height: 42px;
}
</style>
